<script setup lang="ts">
import {ref} from 'vue'
import {onLoad} from "@dcloudio/uni-app";
import {useSettingStore} from "@/store";
import {getActivityList, getSetting} from "@/service/api";

let bg = ref()
const settingStore = useSettingStore()
onLoad(async () => {
  let res = await getSetting()
  document.title = res.data.site_title
  bg.value = res.data.theme_color
  settingStore.setSetting(res.data)
})

let page = ref(1)
let lists: any = ref([])
let total = ref(0)
let loads = ref()
const getList = () => {
  let params = {
    page: page.value
  }
  getActivityList(params).then((res: any) => {
    let data = res.data
    lists.value.push(...data.data)
    // 判断是否加载完成
    console.log(loads.value)
    loads.value?.judgeTotal(data.meta.pagination.total_pages)
  })
}

// 滚动到底部
const reachBottom = (idx: number, isFinish: Boolean) => {
  page.value = idx
  if (isFinish) return
  getList()
}

onLoad(() => {
  getList()
})

const goDetail = (val: any) => {
  uni.navigateTo({
    url: `/pages/index/detail?id=${val.id}`
  })
}

const goMore = () => {
  uni.navigateTo({
    url: '/pages/index/more'
  })
}

const goBack = () => {
  uni.reLaunch({
    url: '/pages/index/index'
  })
}
</script>

<template>
  <total-header @goBack="goBack"/>
  <view class="pl-30rpx pr-30rpx pb-150rpx">
    <view class="items mt-36rpx" @click="goDetail(item)" v-for="(item,index) in lists" :key="index">
      <view class="p-30rpx flex">
        <image :src="item.image" mode="aspectFill" class="items_poster"/>
        <view class="ml-30rpx flex-1 flex flex-col flex-between items-start">
          <view class="text-30rpx">
            {{ item.title }}
          </view>
          <view class="text-24rpx text-gray">
            <view>
              演讲人：{{ item.speaker }}
            </view>
            <view class="mt-10rpx">
              {{ item.activity_date }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <load-more ref="loads" @reachBottom="reachBottom"/>
  </view>
  <view class="footer" @click="goMore">
    <view class="p-30rpx flex-center items-center">
      <text class="text-32rpx text-white mr-10rpx">查看更多</text>
      <image src="/static/arrow-right.svg" mode="aspectFit" class="w-32rpx h-32rpx pt-4rpx"/>
    </view>
  </view>
</template>

<style scoped lang="scss">
.items {
  box-shadow: 5rpx 0 20rpx rgba($color: #002e72, $alpha: 0.28);
  background: #fff;
  border-radius: 8rpx;

  &_poster {
    width: 230rpx;
    height: 160rpx;
    border-radius: 8rpx;
  }
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: v-bind(bg);
}
</style>